<template>
	<view class="container">
		<view class="status-bar"/>
		<myp-navbar title="个人信息" :lefts="lefts" ></myp-navbar>
		<view class="body" @longtab="toEditFaceImage($event)">
			<myp-list ref="myp-list" :showScrollbar="false">
				<myp-list-cell>
					<myp-list-cell>
						<view class="faceImageCell" @click="toEditFaceImage($event)">
							<text class="myp-size-l">头像</text>
							<view>
								<image src="../../../../static/img/head.jpg" class="faceImage"></image>
							</view>
						</view>
					</myp-list-cell>			
					<myp-cell id="nickName" title="昵称" border="all" radius="s" indicator="right" :value="nickName" :boxStyle="listItemStyle" @cellClicked="toEditNickName"></myp-cell>
					<myp-cell id="account" title="账号" border="all" radius="s" indicator="right" :value="userAccount" :boxStyle="listItemStyle"></myp-cell>
					<myp-cell title="二维码" border="all" radius="s" indicator="qr" :boxStyle="listItemStyle" @cellClicked="toEditQR"></myp-cell>
				</myp-list-cell>
			</myp-list>
		</view>
	</view>
	
</template>

<script>
	export default {
		created() {
			this.user = uni.getStorageSync('user');
			console.info(this.user);
			if(this.user == null) {
				this.$Router.replace({name: "login"});
			}
			this.userAccount = this.user.userAccount;
			this.nickName = this.user.nickName;
		},
		
		data() {
			return {
				
				user: null,
				userAccount: "",
				nickName: "",
				lefts: [
					{icon: 'left'}
				],
				listItemStyle: 
					"padding-left:32rpx;padding-right:32rpx;margin-bottom:20rpx;border-radius:10rpx;",
				
				
			}
		},
		methods:{
			toEditFaceImage(value){
				console.info(value);
				this.$Router.push({name: "faceImage"});
			},
			toEditNickName(){
				this.$Router.push({name: "nickName"});
			},
			toEditQR(){
				this.$Router.push({name: "QRCode"});
			}
		}
	}
</script>

<style>
	@import url("@/static/global.css");
	.faceImage{
		position: relative;
		width: 100rpx;
		height: 100rpx;
		left: 500rpx;
		
		
	}
	.faceImageCell {
		width: 100%;
		display: flex; 
		background: #FFFFFF;
		padding: 32rpx;
		align-items: center;
		margin-bottom:20rpx
	}
	
</style>
